<template>
<uni-shadow-root class="partials-productList-threeColumns-threeColumns"><template name="threeColumns">
<block v-if="relateBean.length!=0">
  <view class="wrap">
    <view v-for="(relateBean,index) in (relateBean)" :key="relateBean.index" class="threeColumnsBox" v-if="jsonData.count>0?index<jsonData.count:'true'" @click="tolinkUrl" :data-info="relateBean" style="border-left: 10px solid white;">
       <view class="threeColumnsBoxImg">
          <image mode="aspectFill" :src="(relateBean.imagePath)+'?x-oss-process=style/preview'"></image>
          <view class="product_jifen_block" v-if="relateBean.needJifen">需消耗
            <text class="product_jifen_text" :style="'color:'+(defaultColor)">{{relateBean.needJifen}}积分</text>
          </view>
          <view class="sold_out_block" v-if="relateBean.stock<=0">售罄</view>
      </view> 
     <view class="threeColumnsBoxName" :style="'width:'+((1/jsonData.column)*sysWidth-40)+'px;'">{{relateBean.name}}</view>
       <view class="threeColumnsBoxMoney">
         <view :class="'money '+(jsonData.showCard==1?"limit":"")">
            <text class="price" v-if="relateBean.promotion>0">￥{{relateBean.promotionPrice}}</text>
            <text class="price" v-else>￥{{relateBean.price}}</text>
            <text class="price" v-if="relateBean.maxPrice>relateBean.price">-{{relateBean.maxPrice}}</text>
            <text v-if="relateBean.unitShow" class="unitShow">/{{relateBean.unitShow}}</text>
            <text v-if="relateBean.maxPrice<=relateBean.price&&relateBean.tagPrice>relateBean.price" class="tag_price">￥{{relateBean.tagPrice}}</text>
         </view>
         <text class="cart" v-if="jsonData.showCard==1" @click.stop.prevent="readyAddCar" :data-product="relateBean">+</text>
       </view>
    </view> 
  </view>
</block>
<block v-if="relateBean.length==0">
    <view class="noproduct">
      <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
      <text>没有相关商品</text>
    </view>
</block>
</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/productList/threeColumns/threeColumns'

Component({})

export default global['__wxComponents']['partials/productList/threeColumns/threeColumns']
</script>
<style platform="mp-weixin">
.wrap{
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center; 
  flex-wrap: wrap; 
  padding: 20rpx 0px 20rpx 0; 
}
.threeColumnsBox{
  width: 30%;
  height:340rpx;
  padding-bottom: 15rpx;
  overflow: hidden;
}
.threeColumnsBoxImg{
  width: 100%;
  height: 60%;
  overflow: hidden;
  border-radius: 12rpx;
  position: relative;
  /* background-color: red; */
}
.threeColumnsBoxImg image{
  width: 100%;
  height: 100%;
}
.threeColumnsBoxName{
  height: 65rpx;
  text-align: left;
  font-size: 25rpx;
  margin-top: 10rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}
/*--价格和购物车图片  */
.threeColumnsBoxMoney{
  width: 100%;
  font-size: 30rpx;
  color: red;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tag_price{
  text-decoration:line-through;
  font-size: 24rpx;
  color:#bbb;
  margin-left: 6rpx;
}
.price{
  font-size: 36rpx;
  height:36rpx;
  line-height:36rpx;
}
.unitShow{
  color:#bbb;
  font-size:24rpx;
  margin-left:4rpx;
  letter-spacing:4rpx;
}
.money{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
.limit{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  width: 70%;
}
.cart{
  height: 30rpx;
  width: 30rpx;
  font-size: 30rpx;
  text-align: center;
  line-height: 30rpx;
  border: 1rpx solid red;
  border-radius: 30rpx;
  padding: 5rpx;
}
</style>